<template>
  <div class="home-wrapper">
    <!-- {{tabsList[active].url}} -->
    <!-- 导航栏 -->
    <div class="tab-box">
      <van-tabs v-model:active="active">
        <template v-for="item of tabsList" :key="item.id">
          <van-tab :title="item.name" :to="`/home/${item.url}`"> </van-tab>
        </template>
      </van-tabs>
    </div>
    <!-- 导航栏弹出层 -->
    <div class="tab-pop-box">
      <van-cell @click="showPopup" show-arrow="false" close-on-popstate="true">
        <svg
          focusable="false"
          xmlns="http://www.w3.org/2000/svg"
          width="24"
          height="24"
          fill="currentColor"
          viewBox="0 0 1024 1024"
        >
          <path
            d="M853.333333 725.333333v85.333334H426.666667v-85.333334h426.666666z m0-256v85.333334H170.666667v-85.333334h682.666666z m0-256v85.333334H170.666667v-85.333334h682.666666z"
          ></path>
        </svg>
      </van-cell>
      <van-popup
        v-model:show="show"
        position="bottom"
        :style="{ height: '85%' }"
        closeable
        click="closePopup"
      >
        <div class="tab-pop-content-box">
          <div class="tab-pop-content-title">全部频道</div>
          <div class="tab-pop-content">
            <template v-for="item of tabsList" :key="item.id">
              <div class="tab-pop-content-item">
                <div @click="toHomeRoute(item.url, item.id)">
                  {{ item.name }}
                </div>
              </div>
            </template>
          </div>
        </div>
      </van-popup>
    </div>
  </div>
  <!-- 首页二级路由 -->
  <router-view></router-view>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { useRouter, useRoute } from "vue-router";

// import {} from 'vue'
const router = useRouter();
// 导航栏的当前索引
const active = ref(0);
// 导航栏数据
const tabsList = ref([
  {
    name: "推荐",
    id: 0,
    url: "recommend",
  },
  {
    name: "本地",
    id: 1,
    url: "local",
  },
  {
    name: "新车",
    id: 2,
    url: "demo",
  },
  {
    name: "原创",
    id: 3,
    url: "demo",

  },
  {
    name: "视频看车",
    id: 4,
    url: "demo",

  },
  {
    name: "导购",
    id: 5,
    url: "demo",

  },
  {
    name: "行业",
    id: 6,
    url: "demo",

  },
  {
    name: "SUV",
    id: 7,
    url: "demo",

  },
  {
    name: "新能源",
    id: 8,
    url: "demo",

  },
  {
    name: "用车",
    id: 9,
    url: "demo",

  },
  {
    name: "试驾测评",
    id: 10,
    url: "demo",

  },
  {
    name: "自驾游",
    id: 11,
    url: "demo",

  },
  {
    name: "越野",
    id: 12,
    url: "demo",

  },
  {
    name: "改装",
    id: 13,
    url: "demo",

  },
  {
    name: "提车作业",
    id: 14,
    url: "demo",

  },
  {
    name: "摩托车",
    id: 15,
    url: "demo",

  },
]);
// 导航栏弹出层
const show = ref(false);
const showPopup = () => {
  show.value = true;
};
const closePopup = () => {
  show.value = false;
};
// 导航栏弹出层的导航
const toHomeRoute = (path, id) => {
  // console.log("homeroute");
  router.push({ path: path, replace: true });
  // console.log(active);
  active.value = id;
  closePopup();
  // console.log(active);
};
//初始路由
onMounted(() => {
  // console.log(tabsList.value[active.value].url);
  router.push(`/home/${tabsList.value[active.value].url}`);
});
</script>

<style scoped lang="scss">
.home-wrapper {
  display: flex;
  .tab-box {
    width: 327vw/375 * 100;
  }
  .tab-pop-box {
    width: 48vw/375 * 100;
    height: 40vw/375 * 100;
    .tab-pop-content-box {
      .tab-pop-content-title {
        height: 48vw/375 * 100;
        line-height: 48vw/375 * 100;
        padding: 0 48vw/375 * 100;
        text-align: center;
        font-size: 16vw/375 * 100;
      }
      .tab-pop-content {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        column-gap: 10vw/375 * 100;
        row-gap: 10vw/375 * 100;
        justify-content: center;
        align-items: center;
        padding: 12vw/375 * 100;
        text-align: center;
        .tab-pop-content-item {
          height: 40vw/375 * 100;
          line-height: 40vw/375 * 100;
          background-color: rgba(242, 244, 250);
        }
      }
    }
  }
}
</style>